import React,{PureComponent} from 'react';
import { Switch,Route } from 'react-router-dom';
import Header from '../../components/Header'
import Search from './components/search/Search';
import CinemasItem from './components/CinemasItem';
import {CinemaListTag,CitiesItem} from './styled'
import { getCitiesInfo, getCinemaList } from './api/index'
import './cinemas.css'
class Cinemas extends PureComponent {
  state = {
    cityList: [],
    cniemasList: [],
    selected: '',
    show: false,
    selectedClass: '',
    getType: 'APP订票',
    address: '全城',
    where: '最近去过',
    selectObj: {
      getType: {
        0: 'APP订票',
        1: '前台兑换',
      },
      where: {
        0: '最近去过',
        1: '离我最近',
      }
    }
  }
  componentDidMount() {
    getCitiesInfo().then(res => {
      this.setState({
        cityList:res.data.cities,
      })
    })
    getCinemaList({cityId:330100,page:1,pageSize:15}).then(res => {
      this.setState({
        cniemasList:res.data.cinemas
      })
    })
  }
  
  changeSelect = (val) => {
    if (this.state.selected !== val) {
      this.setState({
        selected: val,
        selectedClass: 'selected',
        show:true,
      })
    } else {
      this.setState({
        selected: '',
        selectedClass: '',
        show: false
      })
    }
  }

  changeSelectTag = (tar, val) => {
    this.setState({
      [tar]:this.state.selectObj[tar][val]
    })
  }

  renderContext = () => {
    switch (this.state.selected) {
      case 0:
        return (<div style={{position:'fixed',zIndex:'2010',backgroundColor:'white',width:'100%'}}>
              <ul className='district-list' style={{display:'flex',flexWrap:'wrap',padding:'0.1rem 0 0 0',margin:'0 0 0 0.1rem'}}>
                <CitiesItem >
                  <div className='selected'>全城</div>
                </CitiesItem>
                <CitiesItem >
                  <div style={{ border: '1px solid #dadada' }}>全城</div>
                </CitiesItem>
                <CitiesItem >
                  <div style={{ border: '1px solid #dadada' }}>全城</div>
                </CitiesItem>
                <CitiesItem >
                  <div style={{ border: '1px solid #dadada' }}>全城</div>
                </CitiesItem>
                <CitiesItem >
                  <div style={{ border: '1px solid #dadada' }}>全城</div>
                </CitiesItem>
                <CitiesItem >
                  <div style={{ border: '1px solid #dadada' }}>全城</div>
                </CitiesItem>
                <CitiesItem >
                  <div style={{ border: '1px solid #dadada' }}>全城</div>
                </CitiesItem>
                <CitiesItem >
                  <div style={{ border: '1px solid #dadada' }}>全城</div>
                </CitiesItem>            
              </ul>
            </div>)
      case 1:
        return (<div style={{ position: 'fixed', zIndex: '2011', backgroundColor: 'white', width: '100%' }}>
        <ul >
          <li className={this.state.getType==='APP订票'?'selected':''} style={{ height: '0.44rem', lineHeight: '0.44rem', paddingLeft: '0.15rem' }} onClick={()=>{this.changeSelectTag('getType',0)}} >
              {
                this.state.getType === 'APP订票' ? <img src={require('@/assets/img/selected.png')} alt="" style={{ width: '0.13rem' }} /> : <span style={{display:'inline-block' ,width: '0.13rem',height:'0.09rem' }}></span>
              }
            <span style={{marginLeft:'0.1rem'}}>APP订票</span>
          </li>
          <li className={this.state.getType==='前台兑换'?'selected':''} style={{ height: '0.44rem', lineHeight: '0.44rem', paddingLeft: '0.15rem' }} onClick={()=>{this.changeSelectTag('getType',1)}}>
              {
                this.state.getType === '前台兑换' ? <img src={require('@/assets/img/selected.png')} alt="" style={{ width: '0.13rem' }} /> : <span style={{display:'inline-block' ,width: '0.13rem',height:'0.09rem' }}></span>
              }
            <span style={{marginLeft:'0.1rem'}}>前台兑换</span>
          </li>
        </ul>
      </div>)
      case 2:
        return (<div style={{ position: 'fixed', zIndex: '2012', backgroundColor: 'white', width: '100%' }}>
          <ul >
            <li className={this.state.where==='最近去过'?'selected':''} style={{ height: '0.44rem', lineHeight: '0.44rem', paddingLeft: '0.15rem' }} onClick={()=>{this.changeSelectTag('where',0)}}>
            {
                this.state.where === '最近去过' ? <img src={require('@/assets/img/selected.png')} alt="" style={{ width: '0.13rem' }} /> : <span style={{display:'inline-block' ,width: '0.13rem',height:'0.09rem' }}></span>
              }
              <span style={{marginLeft:'0.1rem'}}>最近去过</span>
            </li>
            <li className={this.state.where==='离我最近'?'selected':''} style={{ height: '0.44rem', lineHeight: '0.44rem', paddingLeft: '0.15rem' }} onClick={()=>{this.changeSelectTag('where',1)}}>
              {
                this.state.where === '离我最近' ? <img src={require('@/assets/img/selected.png')} alt="" style={{ width: '0.13rem' }} /> : <span style={{display:'inline-block' ,width: '0.13rem',height:'0.09rem' }}></span>
              }
              <span style={{marginLeft:'0.1rem'}}>离我最近</span>
            </li>
          </ul>
        </div>)
      default:
        return <></>
    }
  }

  render() {
    let { cniemasList, show, selected, selectedClass, getType, address, where } = this.state;
    return (
      <div>
        {
          this.props.location.pathname === '/cinemas' ? <div>
            <Header search>影院</Header>
            <CinemaListTag>
            <div className={selected===0?selectedClass:''} style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={()=>{this.changeSelect(0)}} >{address}
                {
                  selected===0?<img src={require('@/assets/img/up.png')} alt=""/>:<img src={require('@/assets/img/down.png')} alt="" />
                  
              }
            </div>
            <div  className={selected===1?selectedClass:''} style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={()=>{this.changeSelect(1)}}>{getType}
                {
                  selected===1?<img src={require('@/assets/img/up.png')} alt=""/>:<img src={require('@/assets/img/down.png')} alt="" />
                  
              }
            </div>
            <div className={selected===2?selectedClass:''} style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={()=>{this.changeSelect(2)}}>{where}
            {
                  selected===2?<img src={require('@/assets/img/up.png')} alt=""/>:<img src={require('@/assets/img/down.png')} alt="" />
                  
              }
            </div>
            </CinemaListTag>
            <div style={{ paddingTop: '0.9rem' }}></div>
            
            {
              this.renderContext()
            }
            
            {
              show?<div  style={{position:'fixed',width:'100vw',height:'100vh',backgroundColor:'rgba(0,0,0,.6)',top:'0',left:'0',zIndex:'999'}} onClick={()=>{this.setState({selected:'',show:false})}}></div>:<></>
            }
            <div style={{ width: '100%', display: 'flex', flexDirection: 'column', backgroundColor: 'white' }}>
              {
                cniemasList.map(el => {
                  return <CinemasItem data={ el } key={el.cinemaId}></CinemasItem>
                })
              }
            </div>

          </div>
          : <></>
        }
        
        <Switch>
          <Route path='/cinemas/search' component={Search} />
        </Switch>
      </div>
    );
  }
}

export default Cinemas;